Video.js是隨著HTML5的來襲所打造的媒體播放器，支援HTML5和Flash影片，類似Youtube或Vimeo的插件，支援桌上型和行動裝置，這個專案從2010年開始，現在已經有超過40萬的網站使用它

GitHub Star: 18,000
Javascripting Overall: 97%
瀏覽器: Chrome、Firefox和IE9+
RWD: 不支援(可運作)
License: MIT

《安裝》

• CDN

    <!-- Videos.js v5.19 -->
    <link href="htts://vjs.zencdn.net/5.19/video-js.min.css" rel="stylesheet">
    <script src="htts://vjs.zencdn.net/5.19/video.min.js"></script>
  

• npm

    $ npm install video.js
  

• Bower

    $ bower install video.js
  

《範例》

• 包含播放、暫停和靜音的播放器

    <!--
    	參數設定[註1]
    	autoplay: 自動播放
    	controls: 顯示控制器
    	poster: 預覽圖
    	preload: 設定預載入模式
    -->
    <video id="my-video" class="<video></video>-js" width="360" height="240" data-setup='{ "autoplay": true, "controls": true, "poster": "", "preload": "auto" }'>
    	<source src="http://www.sample-videos.com/video/mp4/240/big_buck_bunny_240p_1mb.mp4" type='video/mp4'>
    	<p class="vjs-no-js">
    		<!-- 如果使用者不支援JavaScript，顯示這段-->
    		To view this video please enable JavaScript, and consider upgrading to a web browser that
    		<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    	</p>
    </video>
    <br />
    <button onclick="play()">Play</button>
    <button onclick="pause()">Pause</button>
    <button onclick="mute()">Mute</button>
    <script>
    	var videoPlayer = videojs( "my-video" );
    	function play()
    	{
    		videoPlayer.play(); // 播放
    	}
    	function pause()
    	{
    		videoPlayer.pause(); // 暫停
    	}
    	function mute()
    	{
    		videoPlayer.muted( true ); // 靜音
    	}
    </script>
  

  [註1]

  參數	描述

  autoplay|自動播放
  controls|顯示控制器
  poster|預覽圖
  preload|設定預載入模式

  函式列表

  函式	描述

  play()|播放
  pause()|暫停
  muted()|靜音

《延伸》

1. Video.js: The Player Framework
2. videojs/video.js: Video.js - open source HTML5 & Flash video player